<template>
  <div>
    <el-dialog
      :visible="showProductDialog"
      title="商品展示"
      width="800px"
      @close="closefn"
    >
      <el-row
        class="header"
        type="flex"
        align="middle"
        style="background-color: #f3f6fb; height: 45px; margin-top: -20px"
      >
        <el-col :span="12">
          <span style="margin-left: 15px">货道行数:{{ productmsg.vmRow }}</span>
          <span style="margin-left: 15px">货道列数:{{ productmsg.vmCol }}</span>
          <span style="margin-left: 15px"
            >货道容量（个）:{{ productmsg.channelMaxCapacity }}</span
          >
        </el-col>
        <el-col :span="8"><span></span></el-col>
        <el-col :span="4"
          ><el-button @click="wisdom" size="small" type="primary">
            智能排货
          </el-button></el-col
        >
      </el-row>
      <div class="product-container">
        <el-carousel trigger="click" :autoplay="false" :loop="false">
          <el-carousel-item
            v-for="(half, index) in leftAndRight"
            :key="index"
            style="height: 500px; overflow-y: scroll"
          >
            <div class="leftbox">
              <div
                class="singleProduct"
                v-for="item in half"
                :key="item.channelId"
              >
                <span class="rowandcol">{{ item.channelCode }}</span>
                <div class="imgP" v-if="item.sku">
                  <img :src="item.sku.skuImage" alt="" class="product-img" />
                  <p>{{ item.sku.skuName }}</p>
                </div>
                <div v-else class="imgP">
                  <img
                    src="../../../layout/components/暂无图片.png"
                    alt=""
                    class="product-img"
                  />
                </div>
                <el-row type="flex" align="middle">
                  <el-col :push="4">
                    <el-button type="text" @click="addproduct(item)"
                      >添加</el-button
                    >
                    <el-button
                      type="text"
                      :disabled="!item.sku"
                      @click="del(item)"
                      style="color: red"
                      >删除</el-button
                    >
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="button-container">
        <el-button
          type="primary"
          @click="confirm"
          style="margin-left: 45%; margin-top: 20px"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- /**
选择商品的dialog
*/ -->
    <el-dialog
      :visible="showchooseDialog"
      title="商品展示"
      width="800px"
      @close="closefn1"
    >
      <el-form
        :inline="true"
        :model="chooseform"
        ref="chooseform"
        class="demo-form-inline"
      >
        <el-form-item label="商品名称">
          <el-input
            v-model="chooseform.skuName"
            clearable
            placeholder="请输入"
            @input="search"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="choosebox">
        <div class="chooseone" v-for="item in chooselist" :key="item.skuId">
          <el-radio  v-model="haschoose" :label="item">
          <img :src="item.skuImage" alt="" />
          <p>{{ item.skuName }}</p>
          </el-radio>
          <div v-if="item==haschoose" class="xuanzhong"><img src="../../../layout/components/选中图标.png" alt=""></div>
        </div>
        <el-button type="text" @click="inn" :disabled="pageParams.pageIndex==1" class="leftarrow"
          ><i class="el-icon-arrow-left"></i
        ></el-button>
        <el-button type="text" @click="add" :disabled="pageParams.pageIndex==totalpage"  class="rightarrow"
          ><i class="el-icon-arrow-right"></i
        ></el-button>
      </div>
      <div style="display:flex;justify-content:center"> <el-button @click="choosenter" type="primary">确认</el-button></div>
    </el-dialog>

    <el-dialog
      :visible="showwisdomDialog"
      title="智慧排货"
      width="800px"
      @close="showwisdomDialog=false">
      <div>该区域属于{{businesstype}}商圈适合销售一下商品</div>
    <div class="wisdomchoose">
       <div class="wisdomChooseOne" v-for="item in top10list" :key="item.skuId">
          <div class="pic"><img :src="item.image" alt="" /></div>
          <p>{{ item.skuName }}</p>
        </div>
    </div>
     <div style="display:flex;justify-content:center"> <el-button @click="wisdomenter" type="primary">确认</el-button></div>
    </el-dialog>
  </div>
</template>

<script>
import { getVmMsg, getchannelList,businessType,businessTop10, getChooseList,channelConfig } from "@/api/mechian";
export default {
  props: {
    showProductDialog: {
      type: Boolean,
    },
    originProductmsg: {
      type: Object,
      required: true,
    },
  },
  mounted() {},
  data() {
    return {
      businesstype:'学校',
      top10list:[],
      haschoose:{},
      wantchangeone:{},
      chooseform: { skuName: "" },
      showchooseDialog: false,
      showwisdomDialog:false,
      productmsg: "",
      leftAndRight: [],
      chooselist: [],
      leftbox:[],
      rightbox:[],
      origindata:[],
      totalcount: "",
      totalpage: "",
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    // this.getVmMsg()
  },
  methods: {
    search(){
      this.pageParams.pageIndex=1
      this.getChooseList()
    },
    async getChooseList() {
      const res = await getChooseList(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        this.chooseform.skuName
      );
      this.chooselist = res.currentPageRecords;
      this.totalcount = res.totalCount;
      this.totalpage = res.totalPage;
    },
    async wisdomenter(){
      this.top10list.forEach((item,index)=>{
       this.origindata[index].sku = item
      })
      this.showwisdomDialog=false
      // this.getVmMsg()
    },
      async wisdom() {
      this.businesstype= await businessType(this.originProductmsg.businessId)
      const res= await businessTop10(this.originProductmsg.businessId)
     res.forEach(item =>{
       this.$set(item,'skuImage',item.image)
     })
      this.top10list=res
      this.showwisdomDialog=true
          },
     inn(){
            this.pageParams.pageIndex--
            this.getChooseList()
          },
     add(){
            this.pageParams.pageIndex++
            this.getChooseList()
          },
      async getVmMsg() {
        // console.log(this.originProductmsg.businessId);
            const res = await getVmMsg(this.originProductmsg.vmType);
            this.productmsg = res;
            this.origindata = await getchannelList(this.originProductmsg.innerCode);
            const leftbox = this.origindata.filter((item) => {
              return item.channelId % 10 <= 5 && item.channelId % 10 !== 0;
            });
            const rightbox = this.origindata.filter((item) => {
              return item.channelId % 10 > 5 || item.channelId % 10 == 0;
            });
            this.leftbox=leftbox
            this.rightbox=rightbox
            this.leftAndRight = [leftbox, rightbox];
          },
   closefn() {
            this.$emit("update:showProductDialog", false);
          },
   async addproduct(row) {
      const res = this.origindata.find((item) => {
            return item.channelId == row.channelId;
          });
          this.wantchangeone=res
          this.showchooseDialog = true;
          this.getChooseList();
        },
  async del(row) {
      const res = this.origindata.find((item) => {
        return item.channelId == row.channelId;
      });
      res.sku=null
      this.wantchangeone=res
    },
    closefn1() {
      this.haschoose=null,
      this.chooseform.skuName=''
      this.showchooseDialog = false;
    },
    choosenter(){
      this.wantchangeone.sku = this.haschoose
       const obj = this.origindata.find((item) => {
      return item.channelId == this.wantchangeone.channelId;});
      obj.skuId=this.wantchangeone.sku.skuId
     this.closefn1()
    },
   async confirm() {
  //  console.log(this.origindata);
   const resChannelList= this.origindata.map(item=>{
    return {
      channelCode:item.channelCode,
      skuId:item.skuId,
    }
   })
    // console.log(resChannelList);
     try{ await channelConfig({
        channelList:resChannelList,
        innerCode:this.originProductmsg.innerCode
      }).then(()=>{
        this.closefn()
        this.$emit('alreadychange')
      })
      }catch{
        (err)=>{console.log(err);}
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-radio__input{
   display: none !important;
}
.wisdomchoose {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  .wisdomChooseOne {
    position: relative;
    width: 18%;
    height: 40%;
    margin: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
      justify-content: center;
      align-items: space-between;
    background-color: #f6f7fb;
     .pic{
      width: 84px;
      height: 84px;
      img {
      width: 100%;
      max-height: 100%;
      text-align: center;
      object-fit: cover;
    }
     }
    p{
      width: 80px;
      text-align: center;
      /* 显示省略号 */text-overflow: ellipsis;
      /* 不换行 */white-space: nowrap;
      /* 强制文本在一行内显示 */overflow: hidden;
    }
    }
}
.leftbox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  align-content: center;
  justify-content: space-between;

  .singleProduct {
    width: 18%;
    position: relative;
    margin-top: 10px;
    .imgP {
      width: 100%;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      background-color: #f3f6fb;
      img {
        width: 84px;
        max-height: 84px;
        object-fit: cover;
      }
      p {
        font-size: 12px;
        color: #ccc;
      }
    }
    .rowandcol {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      width: 45px;
      height: 20px;
      left: 0;
      top: 7px;
      font-size: 12px;
      border-radius: 0 5px 5px 0;
      background-color: #829bed;
    }
  }
}
.choosebox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  .leftarrow {
    position: absolute;
    left: -35px;
    top: 35%;
    color: #ccc;
    font-size: 40px;
  }
  .rightarrow {
    position: absolute;
    right: -35px;
    top: 35%;
    color: #ccc;
    font-size: 40px;
  }
  .chooseone {
    position: relative;
    width: 18%;
    height: 40%;
    margin: 5px;
    margin-bottom: 10px;
    padding: 10px;
    display: flex;
      justify-content: center;
      align-items: center;
    background-color: #f6f7fb;
.xuanzhong {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  top: 0;
  img{
  position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
    .el-radio{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
    img {
      width: 55px;
      height: 84px;
      text-align: center;
    }
    p{
      width: 80px;
      margin-left: -10px;
      text-align: center;
      /* 显示省略号 */text-overflow: ellipsis;
      /* 不换行 */white-space: nowrap;
      /* 强制文本在一行内显示 */overflow: hidden;
    }
  }
}
</style>
